<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>窥探Window对象</title>
        <style type="text/css">
            /* class选择器*/
            .wrapper { margin: 15px auto ; border: 1px solid blue; width: 80vw; }
            /* 亲子选择器 */
            .wrapper>* { margin: 10px ; }
            .wrapper>.title { color: blue ; border-bottom: 1px solid blue ;}
            .wrapper>div { border-bottom: 1px solid gray ; line-height: 30px; }
            .wrapper>div:last-child { border-bottom: none; }
        </style>
    </head>
    <body>

        <div class="wrapper first">
            <p class="title">Window静态属性: 即直接在 Window 上定义的属性</p>
        </div>

        <div class="wrapper second">
            <p class="title">Window原型属性: 即在 Window.prototype 上定义的属性</p>
        </div>

        <div class="wrapper third">
            <p class="title">window自有属性: 直接在 window 上定义的属性</p>
        </div>

        <script type="text/javascript">
            // 获取 Window 的静态属性
            let names = Object.getOwnPropertyNames( Window );
            console.log( names );

            const first = document.querySelector( '.first' );
            names.forEach( name => {
                // 创建一个新的 div 元素
                let node = document.createElement( 'div' );
                // 将属性名设置到 新创建的 div 元素中
                node.innerHTML = name ;
                // 将新创建的 div 元素添加到 first 内部末尾
                first.appendChild( node );
            });

            console.log( '- '.repeat(20) );

            // 获取 Window 的原型属性 (即在原型上定义的属性)
            names = Object.getOwnPropertyNames( Window.prototype );
            console.log( names );

            const second = document.querySelector( '.second' );
            names.forEach( name => {
                // 创建一个新的 div 元素
                let node = document.createElement( 'div' );
                // 将属性名设置到 新创建的 div 元素中
                node.innerHTML = name ;
                // 将新创建的 div 元素添加到 second 内部末尾
                second.appendChild( node );
            });

            console.log( '- '.repeat(20) );

            // 获取 window 的自有属性 ( Own Property )
            names = Object.getOwnPropertyNames( window );
            console.log( names );

            const third = document.querySelector( '.third' );
            names.forEach( name => {
                // 创建一个新的 div 元素
                let node = document.createElement( 'div' );
                // 将属性名设置到 新创建的 div 元素中
                node.innerHTML = name ;
                // 将新创建的 div 元素添加到 third 内部末尾
                third.appendChild( node );
            });



        </script>
        
    </body>
</html>